<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="data"></div>
<input type="text" id="phone">
<button>验证</button>
<script>
    const div = document.querySelector('#data');
    fetch("/reservation/query")
        .then(res => res.json())
        .then(result => {
            if(result.code != 200){ // 错误的响应
                div.innerHTML = result.message;
                return;
            }
            const table = [
                `<table>
        <thead>
        <tr>
            <th>编号</th>
            <th>客户名字</th>
            <th>电话</th>
            <th>时间</th>
            <th>宠物</th>
            <th>原因</th>
        </tr>
        </thead>
        <tbody>`
            ]
            result.data.forEach(r=>{
                table.push(`<tr>
            <td>${r.id}</td>
            <td>${r.userinfo.name}</td>
            <td>${r.userinfo.phone}</td>
            <td>${r.reservationTime}</td>
            <td>${r.petId}</td>
            <td>${r.reason}</td>
        </tr>`)
            });
            table.push(`</tbody>
    </table>`);
            div.innerHTML = table.join("\n");
        });
</script>
</body>
</html>